<template>
	<view class="role_play">
		<view class="role_play_title">
			<uni-icons color="#fff" size="22" :type="setRolePlay(role_Play)"></uni-icons>
			<uni-data-select v-model="rolePlay" @change="changeRole" :clear="false"
				:localdata="typeList"></uni-data-select>
		</view>
		<view class="role_play_down">
			<view class="uniui-down1"></view>
			<view class=""></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref, nextTick, toRefs
	} from "vue"
	const props = defineProps({
		//子组件接收父组件传递过来的值
		role_Play: {
			default: () => 'u-network',
			type: String
		}
	})
	//使用父组件传递过来的值
	const { role_Play } = toRefs(props)
	const rolePlay = ref('u-network')
	const typeList = ref([
		{ text: '客户端', value: 'u-user' },
		{ text: '服务商端', value: 'u-network' }
	])
	function changeRole(val) {
		if (role_Play.value == rolePlay.value) return
		uni.showModal({
			title: '提示',
			content: `切换为 ${val == 'u-network' ? '服务商端' : '客户端'} 身份登录？`,
			success: function (res) {
				if (res.confirm) {
					if (val == 'u-network') {
						uni.reLaunch({
							url: '/pages/pages_network/login/login'
						})
						uni.removeStorageSync('dd-access-user')
					} else {
						uni.reLaunch({
							url: '/pages/login/login?custCode=' + uni.getStorageSync('custCode')
						})
						uni.removeStorageSync('dd-access-network')
					}
				} else {
					rolePlay.value = role_Play.value
				}
			},
		})
	}
	const setRolePlay = (val) => {
		nextTick(() => {
			rolePlay.value = val
		})
		return val == 'u-user' ? 'person-filled' : 'shop-filled'
	}
</script>

<style lang="scss" scoped>
	.role_play {
		padding: 30rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		height: 80rpx;

		&_title {
			font-size: 28rpx;
			display: flex;
			align-items: center;

			:deep(.uni-select) {
				border: none !important;
				padding: 0;

				.uni-icons {
					display: none;
				}

				.uni-select__input-placeholder {
					text-align: right;
					margin-right: 12rpx;
					font-size: 28rpx;
					color: #999;
				}

				.uni-select__input-text {
					text-align: right;
					margin-right: 12rpx;
					color: #fff;
				}

				.uni-popper__arrow {
					left: 20%;
				}

				.uni-select__selector {
					top: 100%;
					width: 180rpx;
				}
			}
		}

		&_down {
			display: flex;
			align-items: center;

			.uniui-down1 {
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-top: 12rpx solid #fff;
			}
		}
	}
</style>